<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="float:left">
			<select id="source" multiple="multiple" size="8">
				<option>C</option>
				<option>C++</option>
				<option>Java</option>
				<option>C#</option>
				<option>JavaScript</option>
				<option>Perl</option>
				<option>Python</option>
			</select>
		</div>
		<div style="float:left;padding:40px 10px">
			<button id="btnAdd" onclick="addItem()">&gt;&gt;</button>
			<br /><br />
			<button id="btnRemove" onclick="removeItem()">&lt;&lt;</button>
		</div>
		<div style="float:left">
			<select id="target" multiple="multiple" size="8" style="width: 100px;">
			</select>
		</div>
		<script>
			var source = document.getElementById("source");
			var target = document.getElementById("target");
			function addItem(){
				for(var i=0;i<source.options.length;i++){
					var item = source.options[i];
					if(item.selected){
						item.selected = false;
						var found = false;
						for(var j=0;j<target.options.length;j++){
							if(target.options[j].text == item.text){
								found = true;
								break;
							}
						}
						if(!found){
							var added = document.createElement("option");
							added.text = item.text;
							target.appendChild(added);
						}
					}
				}
			}
			function removeItem(){
				for(var i=target.options.length-1;i>=0;i--){
					var item = target.options[i];
					if(item.selected){
						target.removeChild(item);
					}
				}
			}
		</script>
	</body>
</html>
